<template>
  <div>
    <div :key="x" v-for="(m, x) in Object.keys(statistics)">
      <h2 v-if="keyMap[m]">{{ keyMap[m] }}-截止至{{ preDate }}24点的全终端合计数据</h2>
      <h2 v-else>截止至{{ preDate }}24点的全终端合计数据</h2>
      <div class="card">
        <el-card class="box-card" :key="index" v-for="(i, index) in Object.keys(statistics[m])">
          <div class="carddiv">
            <h2 class="cardName">
              <el-tooltip placement="top" v-if="$selectFormat['cardTitle'](i).note">
                <!-- 解释文案 -->
                <div slot="content">{{ $selectFormat['cardTitle'](i).note }}</div>
                <span>{{ $selectFormat['cardTitle'](i).label }}</span>
              </el-tooltip>
              <span v-else>{{ $selectFormat['cardTitle'](i).label }}</span>
            </h2>
            <h1>
              {{
                statistics[m][i].ratio == null
                  ? statistics[m][i].currentCnt
                  : i == 'consumeAvg' || i == 'publishAvg'
                  ? statistics[m][i].ratio
                  : Number(statistics[m][i].ratio * 100).toFixed(2) + '%'
              }}
            </h1>
            <p v-if="i != 'monthCnt' && i != 'weekCnt' && i != 'monthRegCnt' && i != 'weekRegCnt'">
              前一日：{{
                statistics[m][i].preDayCnt != null
                  ? statistics[m][i].preDayCnt
                  : i == 'consumeAvg' || i == 'publishAvg'
                  ? statistics[m][i].preDayRatio
                  : Number(statistics[m][i].preDayRatio * 100).toFixed(2) + '%'
              }}
            </p>
            <div
              class="percentBox"
              v-if="i != 'monthCnt' && i != 'weekCnt' && i != 'monthRegCnt' && i != 'weekRegCnt'"
            >
              增幅：
              <p
                v-if="$selectFormat['cardTitle'](i).label == 'noConsumeCnt'"
                :style="
                  'color:' +
                    (statistics[m][i].preDayPercent > 0
                      ? 'green'
                      : statistics[m][i].preDayPercent === null ||
                        statistics[m][i].preDayPercent == 0
                      ? 'black'
                      : 'red') +
                    ';'
                "
              ></p>
              <p
                :style="
                  'color:' +
                    (statistics[m][i].preDayPercent > 0
                      ? 'red'
                      : statistics[m][i].preDayPercent === null ||
                        statistics[m][i].preDayPercent == 0
                      ? 'black'
                      : 'green') +
                    ';'
                "
              >
                {{ toPersent(statistics[m][i].preDayPercent) }}
              </p>
            </div>
            <p v-if="i != 'monthCnt' && i != 'weekCnt' && i != 'monthRegCnt' && i != 'weekRegCnt'">
              上周同期：{{
                statistics[m][i].preWeekCnt != null
                  ? statistics[m][i].preWeekCnt
                  : i == 'consumeAvg' || i == 'publishAvg'
                  ? statistics[m][i].preWeekRatio
                  : Number(statistics[m][i].preWeekRatio * 100).toFixed(2) + '%'
              }}
            </p>
            <div
              class="percentBox"
              v-if="i != 'monthCnt' && i != 'weekCnt' && i != 'monthRegCnt' && i != 'weekRegCnt'"
            >
              增幅：
              <p
                v-if="$selectFormat['cardTitle'](i).label == 'noConsumeCnt'"
                :style="
                  'color:' +
                    (statistics[m][i].preDayPercent > 0
                      ? 'green'
                      : statistics[m][i].preDayPercent === null ||
                        statistics[m][i].preDayPercent == 0
                      ? 'black'
                      : 'red') +
                    ';'
                "
              ></p>
              <p
                :style="
                  'color:' +
                    (statistics[m][i].preWeekPercent > 0
                      ? 'red'
                      : statistics[m][i].preWeekPercent === null ||
                        statistics[m][i].preDayPercent == 0
                      ? 'black'
                      : 'green') +
                    ';'
                "
              >
                {{ toPersent(statistics[m][i].preWeekPercent) }}
              </p>
            </div>
            <p v-if="i == 'weekCnt' || i == 'weekRegCnt'">
              前一周：{{ statistics[m][i].preWeekCnt }}
            </p>
            <div class="percentBox" v-if="i == 'weekCnt' || i == 'weekRegCnt'">
              增幅：
              <p
                :style="
                  'color:' +
                    (statistics[m][i].preWeekPercent > 0
                      ? 'red'
                      : statistics[m][i].preWeekPercent === null ||
                        statistics[m][i].preDayPercent == 0
                      ? 'black'
                      : 'green') +
                    ';'
                "
              >
                {{ toPersent(statistics[m][i].preWeekPercent) }}
              </p>
            </div>
            <p v-if="i == 'monthCnt' || i == 'monthRegCnt'">
              前一月：{{ statistics[m][i].preMonthCnt }}
            </p>
            <div class="percentBox" v-if="i == 'monthCnt' || i == 'monthRegCnt'">
              增幅：
              <p
                :style="
                  'color:' +
                    (statistics[m][i].preMonthPercent > 0
                      ? 'red'
                      : statistics[m][i].preMonthPercent === null ||
                        statistics[m][i].preDayPercent == 0
                      ? 'black'
                      : 'green') +
                    ';'
                "
              >
                {{ toPersent(statistics[m][i].preMonthPercent) }}
              </p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <el-date-picker
      v-model="dateVal"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptions"
      @change="datepickerHandler"
    ></el-date-picker>
    <el-select v-model="selectValue" placeholder="请选择" v-show="showSelect" @change="change">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-select v-model="selectValue2" placeholder="请选择" v-show="showSelect2" @change="change2">
      <el-option
        v-for="item in options2"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <line-chart
      :xAxis="xAxis"
      :yAxis="yAxis"
      :series="series"
      :legend="legend"
      v-if="flag"
    ></line-chart>
    <table-data
      :flag="flag"
      :tableHeadConfig="tableHeadConfig"
      :tableLoadData="tableLoadData"
    ></table-data>
  </div>
</template>

<script>
  import LineChart from '@/components/LineChart';
  import TableData from '@/components/TableData';

  export default {
    components: {
      LineChart,
      TableData,
    },
    props: {
      statistics: {
        type: Object,
        default: () => {},
      },
      xAxis: {
        type: Array,
        default: () => [],
      },
      yAxis: {
        type: Array,
        default: () => [],
      },
      series: {
        type: Array,
        default: () => [],
      },
      legend: {
        type: Array,
        default: () => [],
      },
      flag: {
        type: Boolean,
        default: false,
      },
      tableHeadConfig: {
        type: Array,
        default: () => [],
      },
      tableLoadData: {
        type: Array,
        default: () => [],
      },
      options: {
        type: Array,
        default: () => [],
      },
      options2: {
        type: Array,
        default: () => [],
      },
      showSelect: {
        type: Boolean,
        default: false,
      },
      showSelect2: {
        type: Boolean,
        default: false,
      },
      select2: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        dateVal: this.time || [],
        selectValue: this.showSelect ? this.options[0].value : '',
        selectValue2:
          this.showSelect2 && this.select2
            ? this.select2
            : this.showSelect2
            ? this.options2[6].value
            : '',
        //不能选择当前日期之后的时间
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        // 获取前一天的时间
        preDate: '',
        // map标题
        keyMap: {
          kt: '有课',
          jm: '积幕',
        },
      };
    },
    created() {
      this.getTimeFn();
      this.$emit('input', {
        dataVal: this.dateVal,
        workType: this.selectValue,
        workType2: this.selectValue2,
      });
    },
    watch: {
      // 这里应该是可以不要的
      // time() {
      //   this.dateVal = this.time;
      // },
      // option() {
      //   this.selectValue = this.option;
      // },
      // option2() {
      //   this.selectValue2 = this.option2;
      // },
    },
    methods: {
      /**
       * 设置默认时间
       */
      getTimeFn() {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        end.setTime(end.getTime() - 24 * 60 * 60 * 1000);
        this.dateVal[0] = this.formatDate(start);
        this.dateVal[1] = this.formatDate(end);
      },
      /**
       * 格式化时间
       */
      formatDate(date) {
        var myyear = date.getFullYear();
        var mymonth = date.getMonth() + 1;
        var myweekday = date.getDate();

        if (mymonth < 10) {
          mymonth = '0' + mymonth;
        }
        if (myweekday < 10) {
          myweekday = '0' + myweekday;
        }
        return myyear + '-' + mymonth + '-' + myweekday;
      },
      datepickerHandler() {
        this.$emit('input', {
          dataVal: this.dateVal,
          workType: this.selectValue,
          workType2: this.selectValue2,
        });
      },
      change(data) {
        this.selectValue = data;
        this.$emit('input', {
          dataVal: this.dateVal,
          workType: this.selectValue,
          workType2: this.selectValue2,
        });
      },
      change2(data) {
        this.selectValue2 = data;
        this.$emit('input', {
          dataVal: this.dateVal,
          workType: this.selectValue,
          workType2: this.selectValue2,
        });
      },
      toPersent(persent) {
        var str = Number(persent).toFixed(2);
        str += '%';
        return str;
      },
    },
    mounted() {
      let time = new Date();
      // 减去一天
      time = +time - 86400000;
      time = new Date(time * 1);
      let m = time.getMonth() + 1;
      let d = time.getDate();
      this.preDate = m + '月' + d + '日';
    },
  };
</script>
<style lang="less" scoped>
  .card {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-content: space-between;
    text-align: center;
  }
  .box-card {
    width: 15%;
    margin-bottom: 10px;
    margin-right: 25px;
  }
  .percentBox {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/ .el-select {
    margin-left: 20px;
  }
  /deep/ .el-select > .el-input {
    width: 300px;
  }
</style>
